<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <basic-container>
    <el-card class="box-card">
      <el-form :inline="true" :model="formData" ref="ruleForm" class="demo-form-inline">
        <el-form-item label="公司名称">
          <el-select v-model="chooesCompanyId" filterable placeholder="请选择" @change='selectChange'>
                <el-option
                  v-for="(item,i) in options"
                  :key="i"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计费月份" style="margin-right: 5%;">
          <el-date-picker
              v-model="formData.billMonth"
              type="date"
              placeholder="选择日期时间"
              format='yyyy年MM月'
               value-format="yyyy-MM"
              >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click='demand'>查询</el-button>
            <el-button size="small" icon="el-icon-delete" @click="resetForm">重置</el-button>
            <el-button size="small" icon="el-icon-download" @click="exportFile">导出</el-button>
        </el-form-item>
      </el-form>    
     </el-card>
    <div class="tags">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        >
        <el-table-column
          type="selection"
          label="全选">
        </el-table-column>
        <el-table-column
          v-for="(item,i) in tagsList"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          >
        </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="showDialog(scope.row)">查看明细</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="formData.current"
        :page-sizes="[10, 15, 20, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-dialog
          title="费用明细"
          :visible.sync="isdetailAndEdit"
          width="60%"
          top="1vh"
          :before-close="handleClose"
          :destroy-on-close='true'
          :close-on-click-modal="false"
          :close-on-press-escape="false">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.carFrameno" width='1000px'  prefix-icon='el-icon-search' placeholder="请输入车架号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="carData"
            style="width: 100%"
            stripe
            >
            <el-table-column
              prop="companyName"
              label="公司名称"
            >
            </el-table-column>
            <el-table-column
              prop="carFrameno"
              label="车架号"
            >
            </el-table-column>
            <el-table-column
              prop="rfId"
              label="RFID"
            >
            </el-table-column>
            <el-table-column
              label="车辆状态"
            >
              <template slot-scope="scope">
                {{scope.row.carStatus | carStatusFilter}}
              </template>
            </el-table-column>
            <el-table-column
              prop="enterInTime"
              label="入场时间"
            >
            </el-table-column>
            <el-table-column
              prop="comeOutTime"
              label="出场时间"
            >
            </el-table-column>
            <el-table-column
              prop="feesInTime"
              label="计费开始时间"
            >
            </el-table-column>
            <el-table-column
              prop="feesOutTime"
              label="计费结束时间"
            >
            </el-table-column>
            <el-table-column
              prop="parkingFee"
              label="停车费(元)"
            >
            </el-table-column>
          </el-table>
      </el-dialog>
    </div>
    
  </basic-container>
</template>
<script>
import { getCompanyName,syscompany,queryCondition } from '@/api/crcar'
import { ExportFile } from '@/api/common.js'
export default{
  data(){
    return{
      isdetailAndEdit:false,
      options:[],
      formData:{
        current:1,
        size:10
      },
      chooesCompanyId:'',
      total:0,
      tagsList:[
        {
          prop:'companyName',
          label:'公司名称'
        },
        {
          prop:'carCount',
          label:'计费车辆'
        },
        {
          prop:'billMonth',
          label:'计费月份'
        },
        {
          prop:'parkingFree',
          label:'合计(元)'
        },
        {
          prop:'billStatus',
          label:'缴费状态'
        },
        // {
        //   prop:'',
        //   label:'是否开票'
        // },
      ],
      tableData:[],
      formInline:{},
      carData:[],
      row:{}
    }
  },
  created(){
   this.getCompanyNames()
   this.syscompany()
  },
  filters:{
    carStatusFilter(val){
      if(val==='1'){
        return'已进场待确认'
      }
      if(val==='2'){
        return'已确认进场'
      }
      if(val==='3'){
        return'待出场'
      }
      if(val==='4'){
        return'已出场'
      }
      if(val==='5'){
        return'待进场'
      }
    }
  },
  methods:{
    async getCompanyNames(){
      try{
        const {data:res} = await getCompanyName()
        console.log(res);
        this.options=res.data
      }catch(error){
        this.$message.error(error)
      }
    },
    async syscompany(){
      //获取表格信息
      try{
        const {data:res} = await syscompany(this.formData)
        console.log(res);
        this.tableData = res.data.records
        this.total = res.data.total
      }catch(error){
        this.$message.error(error)
      }
    },
    demand(){
      //查询
      this.syscompany()
    },
    selectChange(){
      // this.formData.id = this.chooesCompanyId
      this.options.forEach(e => {
        if(e.value==this.chooesCompanyId){
          this.formData.companyName = e.label
        }
      });
      console.log(this.formData);
    },
    sizeChange(val){
      this.formData.size=val
      this.syscompany()
    },
    currentChange(val){
      this.formData.current=val
      this.syscompany()
    },

    handleClose(){
      //关闭弹窗
      this.isdetailAndEdit=false
    },
    async showDialog(row){
      //打开弹框
        this.row =row
        this.isdetailAndEdit=true
        this.queryCondition()
    },
    async queryCondition(){
      try{
        this.formInline.companyName = this.row.companyName
        const {data:res} = await queryCondition(this.formInline)
        if(res.code===0){
          this.carData=res.data.records
        }
        console.log(res);
      }catch(error){
        this.$message.error(error)
      }
    },
    onSubmit(){
      //根据公司名查询车辆信息
      console.log('1111');
      this.queryCondition()
    },
    exportFile(){
      //导出
      let url = '/car/crcartempfree/export'
      let data =this.formData
      ExportFile(url,data)
    },
    resetForm() {
      this.chooesCompanyId=''
      this.formData={}
      this.syscompany()
      
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
